<template>
	<view class="xb-page">
		<form @submit="submit">
			<view class="xb-seg-cell">
				<SegmentedControl @clickItem="changeseg" :values="tabs" :current="currentindex" activeColor="#0DC73A" styleType="text"></SegmentedControl>
			</view>
			<swiper :current="currentindex" style="height: 100%;" >
				<swiper-item>
					<view class="uni-flex uni-row page-select-cell" style="justify-content: space-between; width: 100%;">
						<view class="xb-form-cell-border" style="flex: 1;">
							<picker mode="selector" @change="searchcls(1)" :range="clsstatusList">排课状态</picker>
						</view>
						<view class="xb-form-cell-border" style="flex: 1;">
							<picker mode="selector" @change="searchcls(1)" :range="empList">班主任</picker>
						</view>
						<view class="xb-form-cell-border" style="flex: 1;">
							<picker mode="selector" @change="searchcls(1)" :range="roomList">教室</picker>
						</view>
					</view>
					<view class="xb-search-cell">
						<image style="width: 50px;height: 50px;" src="../../../static/inputsearch.png"></image>
			 			<input style="width: 100%;" name="keyword" v-bind:value="formdata.keyword" class="xb-search" placeholder-class="xb-"
						 placeholder="输入学员姓名或者手机号" />
					</view>
					<view style="margin-top: 10px;">
						<view class="uni-flex uni-row page-cls-item" v-for="(item ,index) in clsList" :key="index">
							<view class="page-cls-name">{{item.name}}</view>
							<view class="page-cls-desc">{{item.desc}}</view>
							<view class="page-cls-desc"><span class="page-next-record-desc">下一节课上课时间:</span>{{item.nexttime}}</view>
							
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="">
						<view class="xb-search-cell">
							<image style="width: 50px;height: 50px;" src="../../../static/inputsearch.png"></image>
							<input style="width: 100%;" name="keyword" v-bind:value="formdata.keyword" class="xb-search" placeholder-class="xb-"
							 placeholder="输入学员姓名或者手机号" />
						</view>
						<view style="margin-top: 10px;">
							<view class="uni-flex uni-row page-o2o-item" v-for="(item ,index) in o2oList" :key="index">
								<view>
									<view class="page-cls-name">{{item.name}}</view>
									<view class="page-cls-desc">{{item.desc}}</view>
								</view>
								<image style="width: 50px;height: 50px;" src="../../../static/head.png"></image>
							</view>
						</view>
					</view>
				</swiper-item>


			</swiper>
		</form>
	</view>

</template>

<script>
	import pageHead from '../../../components/page-head.vue'
	import uniIcon from '../../../components/uni-icon.vue'
	import SegmentedControl from "../../../components/segmented-control.vue"
	import {
		mapActions,
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import {
		clslist
	} from '../../../api/getData.js';
	export default {
		components: {
			pageHead,
			uniIcon,
			SegmentedControl
		},
		computed: {
			...mapGetters(['subjectList'])
		},
		data() {
			return {
				clsstatusList:[],
				
				stucount: 0,
				currentindex: 1,
				tabs: ['按科班', '一对一'],
				roomList: null,
				clsList: [{
					'name': '刚',
					'desc': '这是第一个班',
					'nexttime':'2018-12-12日'
				}, {
					'name': '刚2',
					'desc': '这是第二个班',
					'nexttime':'2018-12-12日'
				}, {
					'name': '刚2',
					'desc': '这是第二个班',
					'nexttime':'2018-12-12日'
				}],
				o2oList: [{
					'name': '刚',
					'desc': '这是第一个班'
				}, {
					'name': '刚2',
					'desc': '这是第二个班'
				}],
				formdata: {
					type: null,
					clsstatus: null,
					empid: null,
					roomid: null,

				},
			}

		},
		components: {
			pageHead,
			SegmentedControl,
		},
		methods: {
			changeseg:function(e){
				this.currentindex=e;
				//console.info('index='+this.currentindex);
				
			},

			submit() {

			},
			async searchcls(type) {
				this.formdata.type = type;
				uni.showNavigationBarLoading();
				const res = await searchCls(formdata);
				if (res.success == true) {
					uni.hideNavigationBarLoading();
					if (this.formdata.type == 1) {
						this.clsList = res.data.values;
					} else {
						this.o2oList = res.data.values;
					}

				} else {
					uni.hideNavigationBarLoading();

				}
			},
		}
	}
</script>

<style scoped>
	@import "../../../common/uni.css";
	@import "../../../common/xb.css";

	.page-cls-name {
		font-size: 30px;
		color: #000000;
	}

	.page-cls-desc {
		font-size: 28px;
		color: #999999;
	}
	.page-next-record-desc {
		color: #000000;
	}
	.page-select-cell {
		background-color: #FFFFFF;
		color: #929292;
	}

	.page-cls-item {
		margin-bottom: 15px;
		background-color: #FFFFFF;
		margin-left: 10px;
		margin-right: 10px;
		padding-left: 30px;
		padding-right: 30px;
		flex-direction: column;
	}

	.page-o2o-item {
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		background-color: #FFFFFF;
		margin-left: 10px;
		margin-right: 10px;
		padding-left: 30px;
		padding-right: 30px;
		height: 120px;

	}
</style>
